<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='注册账户'></uni-nav-bar> -->

		<image @tap="uploadIcon" :src="imageurl" mode=""></image>
		<view class="choice">
			选择头像
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<input name='tel' class="uni-input" focus placeholder="手机号" />
			<view class="password">
				<input name='password' class="uni-input" :password="showPassword" type="text" placeholder="登录密码" />
				<uni-icons @click='isshow' v-if="eyeshow" class='icon' color="#777" type="eye" size="20">
				</uni-icons>
				<uni-icons @click='isshow' v-else class='icon' color="#777" type="email" size="20"></uni-icons>
			</view>
			<input name='name' class="uni-input" placeholder="用户名" />
			<input name='username' class="uni-input" placeholder="昵称" />
			<view class="code">
				<input name='code' class="uni-input" placeholder="验证码" />
				<text>获取验证码</text>
			</view>

			<radio-group @change="radiochange" class="radio" name="radio">
				<label>
					<radio :value="ischeck" /><text>同意 协议</text>
				</label>
			</radio-group>


			<view class="uni-btn-v">
				<button form-type="submit">注册</button>
			</view>
		</form>
	</view>
</template>

<script>
	import baseUrl from "@/api/baseUrl.js"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		register,
		updateMemberInfo,
		updatePassword,
		doLogin,
		uploadAvatar
	} from '../../../api/my/login/login.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				showPassword: true,
				eyeshow: true,
				ischeck: 'false',
				imageurl: ""
			};
		},
		methods: {
			// 上传头像
			uploadIcon() {
				var _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res);
						var that = _this
						uni.uploadFile({
							url: baseUrl + "/lejuClient/login/uploadAvatar",
							filePath: res.tempFilePaths[0],
							name: "file",
							success(result) {
								console.log(result);
								console.log(JSON.parse(result.data).data.fileUrl);
								var arr = JSON.parse(result.data)
								if (arr.success) {
									console.log(this.has);
									console.log(that.has);
									console.log(_this.has);
									_this.has = false
									var arr = JSON.parse(result.data)
									console.log(arr.data.fileUrl);
									_this.imageurl = arr.data.fileUrl
								}

							}
						})
					}
				})
			},
			// 切换密码显示
			isshow() {
				if (this.eyeshow) {
					this.eyeshow = false;
					this.showPassword = false
				} else {
					this.eyeshow = true;
					this.showPassword = true
				}
			},
			radiochange() {
				if (this.ischeck) {
					this.ischeck = 'false'
				} else {
					this.ischeck = 'true'
				}
			},
			formSubmit(e) {
				console.log(e.detail.value);
				var value = e.detail.value
				var arr = {

				}



				arr = JSON.stringify(JSON.stringify(arr))
				if (value.radio == 'false') {

					register({
						'phone': value.tel,
						"username": value.tel,
						'nickname': value.username,
						'password': value.password,
						"icon": this.imageurl
					}).then(res => {
						console.log(res);
						if (res.success) {
							uni.showToast({
								title: "注册成功"
							})
							setTimeout(function() {
								uni.navigateTo({
									url: '../register/register',
								});
							}, 1700)
						}
					})


					// uni.request({
					// 	url: 'http://localhost/lejuClient/member/register',
					// 	method: "POST",
					// 	data: {
					// 	},
					// 	success(res) {
					// 	}
					// })
				} else {
					uni.showToast({
						title: '请勾选同意协议',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choice {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin-top: -60rpx;
		margin-bottom: 40rpx;
		box-sizing: border-box;
	}

	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		display: block;
		margin: 80rpx auto;
		box-sizing: border-box;
		border: 2rpx solid #999;
	}

	.password {
		position: relative;
		box-sizing: border-box;
		width: 610rpx;
		margin: 0 auto;

		.icon {
			position: absolute;
			top: 28rpx;
			right: 40rpx;
			z-index: 999;
			width: 32rpx;
			height: 32rpx;
			color: #666;
			box-sizing: border-box;

		}
	}

	input {
		width: 610rpx;
		height: 100rpx;
		padding: 0rpx 40rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 40rpx;
		box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
	}

	.code {
		position: relative;
		width: 610rpx;
		margin: 0 auto;
		box-sizing: border-box;

		text {
			position: absolute;
			font-size: 24rpx;
			box-sizing: border-box;
			top: 34rpx;
			right: 35rpx;
			z-index: 999;
			height: 32rpx;
			color: #666;
		}
	}

	button {

		width: 600rpx;
		height: 100rpx;
		margin: 80rpx auto;
		box-sizing: border-box;
		border-radius: 50rpx;
		color: white;
		line-height: 100rpx;
		background-color: #354E44;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}

	.radio {
		width: 200rpx;
		margin-left: 275rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
</style>
